<template>
  <div class="body">
    <div class="border navigate-box">
      <div style="height: 600px;padding-top: 20px;">
        <el-steps direction="vertical" :active="activeIndex">
          <el-step title="注册"></el-step>
          <el-step title="下载"></el-step>
          <el-step title="上传"></el-step>
          <el-step title="仿真操作"></el-step>
          <el-step title="参数配置"></el-step>
        </el-steps>
      </div>
    </div>
    <div style="height: 100%;display: flex;justify-content: center;align-items: center;">
      <el-divider direction="vertical"></el-divider>
    </div>
    <div class="border main-box">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>注册</span>
        </div>
        <div class="text item">
          请实验者点击注册按钮进行注册，注册成功之后，通过注册的账号和密码进行登录。登 录成功之后，你会获取阿里云服务器的 IP 地址、用户名和密码。
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>下载</span>
        </div>
        <div class="text item">
          点击“仿真操作”按钮，在弹出的界面上下载两个软件（Xshell、FileZilla）并分别安装 在你的本机上，Xshell 用于连接阿里云服务器，FileZilla 用于上传和下载你要操作的内容。 然后，在你的本地机器上安装这两个软件。
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>上传</span>
        </div>
        <div class="text item">
          用 FileZilla 上传你所需要仿真的内容，同样用你获取到阿里云服务器的 IP 地址、用户名 和密码。
          <img src="" class="pic">
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>仿真操作</span>
        </div>
        <div class="text item">
          <ol>
            <li>
              登录阿里云服务器
              <br>
              打开 xshell 软件，用你获得的阿里云服务器的 IP 地址、用户名和密码登录阿里云服 务器
            </li>
            <li>
              登录之后，切换到 home 目录下找到 experiment 目录，看看在该目录下有没有你上 传的程序文件或目录。
            </li>
            <li>
              交叉编译
              <br>
              比如我上传了一个线程程序放在文件夹 thread 里面，你可以在本机上实现程序的交叉编译 也可以在阿里云服务器上进行交叉编译。如在阿里云服务器上进行交叉编译，请使用交叉编 译器 arm-linux-gnueabi-gcc。
              <br>
              先在阿里云服务器上使用主机编译器 gcc 编译程序 thread.c，生成主机上的课执行程序
              thread-host。
              <br>
              <span class="code">
  mousejcl@iZ8vbe31hvnj97p8hcnbg0Z:/home/experiment/thread$ ls
  ''$'\001' Makefile thread.c
  mousejcl@iZ8vbe31hvnj97p8hcnbg0Z:/home/experiment/thread$ sudo gcc -Wall -g thread.c -o thread-host -lpthread
              </span>
            </li>
            <li>
              运行
              <br>
              在阿里云服务器主机上运行这两个程序 thread-host、thread-arm。结果显示 thread-host 可执
              行，thread-arm 不能执行。
            </li>
            <li>
              仿真操作
              <br>
              切换到 home 目录下，该目录下有两个仿真目录 QEMU_tftp、QEMU_qt_test。仿真目录
              QEMU_tftp 是在无图形界面的情况下，通过 tftp 协议传输文件和 NFS 网络文件系统创建共享
              目录来进行仿真操作。QEMU_qt_test 仿真目录是带 qt 图形界面的，要仿真的程序需要在创
              建文件系统的时候把它一起整合进去，一般用于 qt5.12 编写的通过交叉编译的程序进行仿
              真。下面演示用仿真目录 QEMU_tftp 进行仿真操作。
              <br>
              首先，进入 QEMU_tftp 目录，启动脚本件 uboot_boot.sh。脚本里面的文件系统有两个，一
              个是不带 qt 的 rootfs-0314.ext3，一个是带 qt 的 rootfs-qt5-12-1.ext3，都可以使用。
              <br>
              <span class="code">
mousejcl@iZ8vbe31hvnj97p8hcnbg0Z:/home/QEMU_tftp$ cat uboot_boot.sh
#!/bin/bash
  qemu-system-arm \
  -M vexpress-a9 \
  -kernel u-boot \
  -nographic \
  -m 512M \
  -net nic,vlan=0 -net tap,vlan=0,ifname=tap0 \
  -sd
              </span>
              <br>
              在脚本文件启动的时候，两次点击“否”，进入倒计时阶段，3 秒之内按回车键，进入参数
            </li>
          </ol>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>参数配置界面</span>
        </div>
        <div class="text item">
          配置参数如下，根据服务器的主机 IP 不同选择不同的配置参数，如下所示：
          <el-table
            :data="hostConfig"
            stripe
            style="width: 100%">
            <el-table-column
              prop="ip"
              label="主机ip"
              width="125">
            </el-table-column>
            <el-table-column
              label="参数配置"
              width="525">
              <template slot-scope="scope">
                <span class="code">
setenv ipaddr {{scope.row.config.envIp}}; setenv netmask 255.255.240.0; setenv
serverip {{scope.row.config.rip}}; setenv bootargs "console=ttyAMA0
root=/dev/mmcblk0 init=/linuxrc rw rootwait"

tftp 0x60000000 uImage; tftp 0x70000000 vexpress-v2p-ca9.dtb; fdt addr 0x70000000; bootm 0x60000000 - 0x70000000

tyc@vexpress:/ # ifconfig eth0 {{scope.row.config.ip}} up
tyc@vexpress:/ # route add default gw {{scope.row.config.gateWay}}
tyc@vexpress:/ # mount -t nfs -o nolock {{scope.row.config.ip2}}:/root/experiment/home
                </span>
              </template>
            </el-table-column>
          </el-table>
          这里选择主机 IP 是 39.99.135.255 为例进行参数配置:
          <ol>
            <li>
              这里参数主要用于配置主机与虚拟仿真平台 Cortex-A9 构建一个局域网，便于 tftp 协议
              传输。
              <span class="code">
setenv ipaddr 172.26.254.100; setenv netmask 255.255.240.0; setenv serverip 172.26.254.149;
setenv bootargs "console=ttyAMA0 root=/dev/mmcblk0 init=/linuxrc rw rootwait"
                </span>
            </li>
            <li>
              这 里 参 数 用 于 tftp 协 议 下 载 传 输 uImage 、 vexpress-v2p-ca9.dtb 文 件 到 内 核 地 址
              0x60000000 - 0x70000000 区间。
              <span class="code">
tftp 0x60000000 uImage; tftp 0x70000000 vexpress-v2p-ca9.dtb; fdt addr 0x70000000; bootm
0x60000000 - 0x70000000
                </span>
              <img src="">
              按回车，就进入虚拟仿真环境
              <img src="">
            </li>
            <li>
              设置共享目录
              <br>
              要想虚拟仿真环境能仿真主机上的文件，是通过 nfs 网络文件系统来设置共享目录。操
              作如下：
              <span class="code">
tyc@vexpress:/ # ifconfig eth0 172.26.254.101 up #设置虚拟环境的 IP 地址与主机处于
同一个网络
tyc@vexpress:/ # route add default gw 172.26.254.1 #设置虚拟环境的网关
tyc@vexpress:/ # mount -t nfs -o nolock 172.26.254.149:/home/experiment /home #设
置虚拟环境与主机的共享目录，主机目录是/home/experiment，虚拟仿真环境是/home.
                </span>
              <img src="">
              设置共享目录，就能看见我们上传到服务器主机上的内容了，比如 thread 目录
              <img src="">
              在虚拟仿真环境下，运行 threa-arm，可以得到如下结果。但是运行 thread-host 就运行
              不了了。仿真成功。
              <img src="">
            </li>
          </ol>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
    export default {
        name: "OperatingSheet",
        data(){
          return{
            activeIndex: "1",
            hostConfig:[
              {
                ip: "39.99.135.255",
                config: {
                  envIp: "172.26.254.100",
                  rip:"172.26.254.149",
                  ip: "172.26.254.101",
                  gateWay: "172.26.254.1",
                  ip2: "172.26.254.149"
                }
              },
              {
                ip: "47.112.176.72",
                config: {
                  envIp: "172.17.133.100",
                  rip:"172.17.133.176",
                  ip: "172.17.133.101",
                  gateWay: "172.17.133.1",
                  ip2: "172.17.133.176"
                }
              },
              {
                ip: "8.129.209.109",
                config: {
                  envIp: "172.30.203.100",
                  rip:"172.30.203.40",
                  ip: "172.30.203.101",
                  gateWay: "172.30.203.1",
                  ip2: "172.30.203.40"
                }
              },
              {
                ip: "39.107.240.229",
                config: {
                  envIp: "172.16.184.100",
                  rip:"172.16.184.26",
                  ip: "172.16.184.101",
                  gateWay: "172.16.184.1",
                  ip2: "172.16.184.40"
                }
              },
              {
                ip: "8.129.97.79",
                config: {
                  envIp: "172.18.141.100",
                  rip:"172.18.141.64",
                  ip: "172.18.141.101",
                  gateWay: "172.18.141.1",
                  ip2: "172.18.141.64"
                }
              }
            ]
          }
        }
    }
</script>

<style scoped>
  .body{
    width: 100%;
    height: 100%;
    display: flex;
  }

  .border{
    /*border: 1px solid red;*/
  }

  .navigate-box{
    flex: 1 1 auto;
    width: 400px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .main-box{
    flex: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .el-divider--vertical{
    height: 90vh;
  }

  /******* 卡片相关 *******/
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 700px;
  }

  /************** 图片 *************/

  .pic{
    height: 200px;
  }

  /*************** box-card **************/

  .box-card{
    margin: 20px;
  }
</style>
